<template>
  <div class="activity-form-container">
    <el-card class="box-card">
      <template #header>
        <div class="card-header">
          <span @click="$router.go(-1)"
            ><i style="font-size: 14px" class="iconfont icon-fanhui">
              返回</i
            ></span
          >
          <span style="float: right">历史活动记录</span>
        </div>
      </template>
      <div style="height: 503px">
        <div style="width: 300px; margin: 0 auto">
          <el-input
            v-model="datas.key"
            placeholder="请输入活动名称"
            :prefix-icon="Search"
          />
        </div>
        <div class="table">
          <el-table
            v-loading="data.loading"
            element-loading-text="数据加载中..."
            :data="data.underwaylist"
            @row-click="handleClick"
          >
            <el-table-column type="selection" width="55" />
            <el-table-column fixed prop="title" label="活动名称" />
            <el-table-column fixed prop="publisherName" label="活动发布人" />
            <el-table-column
              prop="endTime"
              sortable
              label="活动开始时间"
              width="160"
            />
            <el-table-column
              prop="endTime"
              sortable
              label="活动结束时间"
              width="160"
            />
            <el-table-column prop="eventTypeName" label="活动类型" />
            <el-table-column
              show-overflow-tooltip
              prop="location"
              label="活动地点"
            />
            <el-table-column prop="status" label="活动状态">
              <template #default="scope">
                <el-tag type="success" v-if="scope.row.status == 'completed'"
                  >已完成</el-tag
                >
                <el-tag type="danger" v-if="scope.row.status == 'cancelled'"
                  >已取消</el-tag
                >
              </template>
            </el-table-column>
            <el-table-column
              show-overflow-tooltip
              prop="description"
              label="活动描述"
            />

            <el-table-column
              prop="createAt"
              label="创建时间"
              sortable
              width="160"
            />
          </el-table>
        </div>
        <div class="pagination">
          <el-pagination
            background
            :page-size="datas.limit"
            layout="prev, pager, next"
            :total="datas.total"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
          />
        </div>
      </div>
    </el-card>
    <el-drawer
      v-model="data.table"
      title="活动详情"
      :destroy-on-close="true"
      style="background-color: #e6eefa"
      size="60%"
      class="high-z-index-drawer"
      @close="handleClose"
    >
      <el-scrollbar>
        <underwayxx :data="data.underwayData" @close-drawer="handleClose" />
      </el-scrollbar>
    </el-drawer>
  </div>
</template>

<script setup lang="ts">
import { reactive, onMounted, watch } from "vue";
import { Get_js_underway } from "@/api/activity";
import { Search } from "@element-plus/icons-vue";
import underwayxx from "@/components/activity/underwayxxjs.vue";

const data = reactive({
  title: "",
  startTime: "",
  endTime: "",
  location: "",
  eventType: "",
  description: "",
  typelist: [],
  underwayData: [],
  table: false,
  underwaylist: [],
  loading: false,
});

const datas = reactive({
  page: 1,
  limit: 10,
  total: 0,
  key: "",
});

// 关闭抽屉
const handleClose = () => {
  data.table = false;
  bind();
};

// 详细信息
const handleClick = (row: any) => {
  data.underwayData = row;
  data.table = true;
};

// 点击分页
const handleSizeChange = (val: number) => {
  datas.page = 1;
  datas.limit = val;
};
const handleCurrentChange = (val: number) => {
  datas.page = val;
};

// 获取数据
const bind = async () => {
  data.loading = true;
  const res = await Get_js_underway({
    ...datas,
  });
  if (res.code === 0) {
    data.underwaylist = res.data.data;
    datas.total = res.data.total;
  }
  data.loading = false;
};

onMounted(() => {
  bind();
});

// 监听数据变化
watch([datas], (newVal, oldVal) => {
  bind();
});
</script>

<style scoped>
.activity-form-container {
  max-width: 100%;
}

.avatar-uploader {
  text-align: center;
}

.avatar {
  width: 100px;
  height: 100px;
  border-radius: 50%;
}

.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 100px;
  height: 100px;
  line-height: 100px;
  text-align: center;
  border: 1px dashed #d9d9d9;
  border-radius: 50%;
}
</style>
